<template>
	<view class="nav-section">
		<template v-for="(item,index) in navList">
			<view :key="index" class="grid-item-wapper" :class="'item'+(index+1)"  @click="handleClick(item)" v-if="item.ImgUrl">
				<view class="img-wap">
					<image :src="item.ImgUrl" mode="aspectFill"></image>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'navGrid',
		props:{
			navList: {
				type:Array,
				default:()=>{}
			}
		},
		data () {
			return {
				
			}
		},
		methods:{ 
			handleClick(item) {
				this.$emit('navTo',item)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.nav-section {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	min-height: 300rpx;
	grid-template-columns: 350rpx 175rpx 175rpx ;
	grid-template-rows:  175rpx 175rpx 175rpx;
	.grid-item-wapper {
		background-color: #ccc;
		margin: 10rpx;
		position: relative;
		.img-wap {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.item1 {
		grid-row-start: 1;
		grid-row-end: 3;
	}
	
	.item2 {
		 grid-column-start: 2;
		  grid-column-end: 4;
	}
	.item5 {
		grid-column-start: 1;
		grid-column-end: 4;
	}
}
</style>
